<template>
	<div class="wrapper">
		<div class="tabs">
			<div
				class="tab"
				:class="{ 'tab--ac': tab.val === curTab }"
				v-for="tab in tabs"
				:key="tab.val"
				@click="tabChange(tab)"
			>
				{{ tab.name }}
			</div>
		</div>
		<div style="position: relative">
			<div class="container" ref="scrollRef">
				<div>
					<div class="box" v-for="(order, index) in orders" :key="index">
						<div class="box__ttl">
							<!-- <div class="prod-icon">
								<img src="@/assets/hxblogo.png" alt="" />
							</div> -->
							{{ order.distributionName }}
						</div>

						<div class="box__cont">
							<div class="info">
								<span>投保人: </span><em>{{ order.policyHolder }}</em>
								<span>产品名称: </span><em>{{ order.spuName }}</em
								><span>订单金额: </span> <em>{{ order.money }}</em>
								<span>订单编号: </span><em>{{ order.orderSn }}</em>
							</div>
							<!-- <div class="info l">被保险人: {{ order.name2 }}</div> -->
						</div>

						<div class="corner" :class="getStatusColor(order.statusStr)">
							{{ order.statusStr }}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import useScroll from '@/composition/use-scroll'
import useList from '@/composition/use-list'
import { distributorOrder } from '@/api'
import { onMounted } from 'vue'
export default defineComponent({
	setup(props, { emit, slots, attrs }) {
		const scrollRef = ref(null)
		const { scroll } = useScroll(scrollRef, {
			pullUpLoad: true,
			pullDownRefresh: true
		})

		const {
			list: orders,
			pushList,
			page,
			limit,
			loadStatus,
			search,
			refreshList,
			reloadList
		} = useList(distributorOrder)
		search.status = ''
		reloadList()

		onMounted(() => {
			const scrollVal = scroll.value
			scrollVal.on('pullingUp', async () => {
				await pushList()
				scrollVal.finishPullUp()
			})
			scrollVal.on('pullingDown', async () => {
				await reloadList()
				scrollVal.finishPullDown()
			})
		})

		return { scroll, scrollRef, orders, search, reloadList }
	},
	data() {
		return {
			tabs: [
				{
					name: '全部',
					val: 0
				},
				{
					name: '未支付',
					val: 1
				},
				{
					name: '已支付',
					val: 2
				},
				{
					name: '已出单',
					val: 3
				},
				{
					name: '已取消',
					val: 4
				},
				{
					name: '已退款',
					val: 5
				}
			],
			curTab: 0

			// orders: [
			// 	{
			// 		statusStr: '已支付',
			// 		status: 0,
			// 		name1: '不来方',
			// 		name2: '水无月'
			// 	},
			// 	{
			// 		statusStr: '未支付',
			// 		status: 1,
			// 		name1: '不来方',
			// 		name2: '水无月'
			// 	},
			// 	{
			// 		statusStr: '已取消',
			// 		status: 2,
			// 		name1: '不来方',
			// 		name2: '水无月'
			// 	},
			// 	{
			// 		statusStr: '已支付',
			// 		status: 0,
			// 		name1: '不来方',
			// 		name2: '水无月'
			// 	},
			// 	{
			// 		statusStr: '未支付',
			// 		status: 1,
			// 		name1: '不来方',
			// 		name2: '水无月'
			// 	},
			// 	{
			// 		statusStr: '已取消',
			// 		status: 2,
			// 		name1: '不来方',
			// 		name2: '水无月'
			// 	},
			// 	{
			// 		statusStr: '已支付',
			// 		status: 0,
			// 		name1: '不来方',
			// 		name2: '水无月'
			// 	},
			// 	{
			// 		statusStr: '未支付',
			// 		status: 1,
			// 		name1: '不来方',
			// 		name2: '水无月'
			// 	},
			// 	{
			// 		statusStr: '已取消',
			// 		status: 2,
			// 		name1: '不来方',
			// 		name2: '水无月'
			// 	}
			// ]
		}
	},
	computed: {},
	mounted() {},
	methods: {
		tabChange(tab) {
			this.curTab = tab.val
			this.search.status = tab.val
			this.reloadList()
		},
		getStatusColor(status) {
			return {
				未支付: 'corner--main',
				已支付: 'corner--suc',
				已出单: 'corner--suc',
				已取消: 'corner--cancel',
				已退款: 'corner--cancel'
			}[status]
		}
	},
	components: {}
})
</script>

<style lang="scss" scoped="scoped">
.wrapper {
	position: fixed;
	bottom: 0;
	top: 0;
	right: 0;
	left: 0;
	display: grid;
	grid-template-rows: auto 1fr;
	justify-items: stretch;
}

.tabs {
	display: flex;
	margin: $space_4;
	justify-content: space-between;
	.tab {
		font-size: $font_medium_x;

		&--ac {
			color: $color_main;
		}
	}
}

.container {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	overflow: hidden;
}

.box {
	position: relative;

	&__ttl {
		display: flex;
		align-items: center;
	}
}

.prod-icon {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: #f3f3f3;
	margin-right: $space_1;
	img {
		widows: 100%;
		height: 100%;
		display: block;
	}
}

.info {
	font-size: $font_small_x;
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 14px;
	span {
		color: $color_text_l;
	}
	em {
		font-style: normal;
	}

	&:not(:first-child) {
		margin-top: $space_2;
	}
	&.l {
		color: $color_text_l;
	}
}

.corner {
	position: absolute;
	top: 0;
	right: 0;
	border-radius: 0 $border_radius_3 0 $border_radius_3;
	padding: $space_2 $space_3;
	box-shadow: inset 0px 50px 20px -50px rgba(0, 0, 0, 0.2);
	white-space: nowrap;

	font-size: $font_medium;

	&--suc {
		background-color: color-mix(in srgb, $color_suc 30%, #fff);
		color: $color_suc;
	}
	&--main {
		background-color: color-mix(in srgb, $color_main 30%, #fff);
		color: $color_main;
	}
	&--cancel {
		background-color: color-mix(in srgb, $color_text_ll 20%, #fff);
		color: $color_text_ll;
	}
}
</style>
